<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>dom结构</title>
</head>
<body>


  <div id="container">
       <div id="box1">box1</div>
  </div>
  <div>
      <button id="btnAppend">追加</button>
       <button id="btnRemove">移除</button>
      <button id="btnReplace">替换</button>
      <button id="btnInsert">前置添加</button>
  </div>
</body>
<script>

      var container = document.getElementById('container');

      var btnRemove=document.getElementById('btnRemove');
      btnRemove.onclick=function (){
          var box1 = document.getElementById('box1');
          container.removeChild(box1);
      }

      var btnAppend=document.getElementById('btnAppend');
      btnAppend.onclick=function (){
          var appendedBox = document.createElement('div');
          appendedBox.innerText ='appended';
          container.append(appendedBox);
      }
      var btnReplace=document.getElementById('btnReplace');
      btnReplace.onclick=function (){
          var newBox = document.createElement('div');
          newBox.innerText ='newBox';
          var box1 = document.getElementById('box1');
          container.replaceChild(newBox,box1);
      }
      var btnInsert=document.getElementById('btnInsert');
      btnInsert.onclick=function (){
          var newBox = document.createElement('div');
          newBox.innerText ='newBoxForInsert';

          var box1 = document.getElementById('box1');

          container.insertBefore(newBox,box1);
      }




</script>
</html>